<template>
    <div class="MyFlower" v-loading="loading">
        <!--       公共顶部-->
        <Top>
            <i class="el-icon-arrow-left back" slot="leftPart" @click="goback()"></i>
            <p class="title" slot="midPart">我的花瓣</p>
        </Top>
        <!--头-->
        <div class="money-head">
            <p class="count">{{total}}</p>
            <p class="tips">花瓣数量</p>
            <button @click="recharge()">充值</button>
        </div>
        <!--账单头部-->
        <div class="chargeHead clearfix">
            <p>花瓣明细</p>
            <span class="filterBox" @click="maskShow=true">筛选<svg class="icon child-2" aria-hidden="true"><use xlink:href="#icon-shaixuan"></use></svg></span>
        </div>
        <!--筛选弹窗-->
        <transition name="bounce-up">
            <div class="mask" v-if="maskShow" @click.self="maskShow=false">
                <ul class="filterWindow">
                    <li @click="filter(0)" :class="{on:log_type===0}">全部</li>
                    <li @click="filter(1)" :class="{on:log_type===1}">充值</li>
                    <li @click="filter(2)" :class="{on:log_type===2}">消费</li>
                    <li @click="filter(3)" :class="{on:log_type===3}">提现</li>
                    <li @click="filter(4)" :class="{on:log_type===4}">收入</li>
                </ul>
            </div>
        </transition>
        <!--账单明细列表-->
        <ul class="chargeList">
            <li class="clearfix items animated flipInX" :style="{animationDelay:delay(index)}" v-for="(item,index) in list" :key="index">
                <div class="left">
                    <p>{{item.log_type_str}}</p>
                    <p class="time">{{item.add_time}}</p>
                </div>
                <div class="right">
                    <p class="num" :class="item.log_type===1?'add':'del'">{{item.log_amount}}</p>
                    <p class="tips">{{item.status}}</p>
                </div>
            </li>
            <li class="loadmore" v-show="list.length>=prePage" style="padding-top:.2rem">
                <!--加载更多-->
                <p class="moreBtn animated flipInX" v-if="!noData" >
                    <el-button 
                               type="primary" 
                               :loading="!loadMoreState" 
                               size="mini" 
                               @click="loadMoreData"
                               :disabled="!loadMoreState">{{loadMoreText}}</el-button>
                </p>
                <!--没有更多-->
                <fieldset class="noMore animated flipInX" v-if="noData" >
                    <legend align="center" class="noMoreText">没有更多了</legend>
                </fieldset>
            </li>
            <!--无数据时显示-->
            <li class="mid" v-if="list.length<=0">
                <div class="nodata animated fadeIn">
                    <img src="../../assets/huawa-off.png" alt="" />
                    <p>暂无数据..</p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    //导入相关组件
    import Top from '@/components/smallCom/Top'
    export default {
        name: 'MyFlower',
        components: {
            Top,//顶部信息组件
        },
        data () {
            return {
                loading:false,
                total:0,//总余额
                cost_money:0,//待结算金额
                list:[],//充值列表数据
                maskShow:false,//遮罩
                log_type:0,////0.全部 1.充值 2.消费 3.提现 4.收入

                /*分页*/
                loadMoreState:true,//加载更多按钮状态
                loadMoreText:'加载更多',//加载更多文本
                currentPage:2,//当前页
                prePage:6,//每页显示几条数据
                noData:false,//是否还有数据
            }
        },
        created(){
            this.loading = true;
            this.Posthttp('/?method=flower.user.rechargeList',{member_id:this.getMemberId(),log_type:0,page:1},(res)=>{
                this.loading = false;
                /*登录是否成功*/
                if(JSON.parse(res.bodyText).status ===1){
                    this.list = JSON.parse(res.bodyText).data.list;
                    this.total = JSON.parse(res.bodyText).data.member_amount;
                    this.cost_money = JSON.parse(res.bodyText).data.cost_money;
                }else{
                    this.$message.warning(JSON.parse(res.bodyText).msg); 
                }
            });
        },
        methods:{
            //去充值
            recharge(){

                this.$router.push('/bag/deposit') 
                return

                /*IOS内购判断*/
                if(this.deviceType()===2){
                    let data = this.getMemberId()
                    window.webkit.messageHandlers.hyBuyFlower.postMessage(`${data}`)  
                }else{
                    this.$router.push('/bag/deposit') 
                }
            },
            //筛选
            filter(index){
                this.maskShow = false;
                this.loading = true;
                this.Posthttp('/?method=flower.user.rechargeList',{member_id:this.getMemberId(),log_type:index,page:1},(res)=>{
                    this.loading = false;
                    /*登录是否成功*/
                    if(JSON.parse(res.bodyText).status ===1){
                        this.list = JSON.parse(res.bodyText).data.list;
                        this.log_type = index;
                    }else{
                        this.log_type = 0;
                        this.$message.warning(JSON.parse(res.bodyText).msg); 
                    }
                });
            },
            //加载更多
            loadMoreData(){
                this.loadMoreState = false;
                this.loadMoreText = '加载中..';
                this.Posthttp('/?method=flower.user.rechargeList',{member_id:this.getMemberId(),log_type:this.log_type,page:this.currentPage},(res)=>{
                    this.loadMoreState = true;
                    this.loadMoreText = '加载更多';
                    let Dlength = JSON.parse(res.bodyText).data.list.length;
                    if(Dlength<1){
                        this.noData = true; 
                    }else{
                        this.noData = false;
                        this.currentPage++;
                        this.list = this.list.concat(JSON.parse(res.bodyText).data.list);
                    }
                });
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .MyFlower {
        background-color: #f2f2f2;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        color: #666;
        padding-top: .8rem;
        /**/
        .money-head{
            width: 100%;
            height: 4rem;
            background-color: #de6940;
            color: #fff;
            text-align: center;
            padding-top: .4rem;
            img.bag{
                width: .9rem;
                height: 1.1rem;
            }
            .count{
                font-size: .66rem;  
            }
            .tips{
                opacity: .9;
                margin: .2rem 0;
            }
            button{
                width: 4.76rem;
                height: .8rem;
                background-color: #fff;
                border-radius: .4rem;
                border: 0;
                outline: none;
                font-size: .28rem;
                margin-top: .8rem;
            }
        }
        /*筛选弹窗*/
        .filterWindow{
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #fff;
            text-align: center;
            li{
                height: .8rem;
                line-height: .8rem;
                border-top: 1px solid #e4e4e4;
                &.on{
                    background-color: #de6940;
                    border-top: 1px solid #de6940;
                    color: #fff;
                }
            }
        }
        /**/
        .chargeHead{
            background-color: #fff;
            font-size: .26rem;
            color: #333;
            height: .8rem;
            line-height: .8rem;
            margin-top: .2rem;
            border-bottom: 1px solid #e4e4e4;
            p{
                width: 80%;
                float: left;
                border-right: 1px solid #e4e4e4;
                padding-left: .2rem;
            }
            .filterBox{
                width: 20%;
                float: right;
                text-align: right;
                padding-right: .2rem;
                .icon{
                    font-size: .3rem;
                }
            }
        }
        /**/
        .chargeList{
            padding: 0 .2rem;
            background-color: #fff;
            width: 100%;
            position: fixed;
            top: 5.8rem;
            bottom: 0;
            overflow-y: auto;
            padding-bottom: .4rem;
            .loadmore{
                border-bottom: 0;
            }
            li.items{
                width: 100%;
                line-height: .36rem;
                padding: .22rem 0;
                border-bottom: 1px solid #e4e4e4;
                .left{
                    text-align: left;
                    .time{
                        font-size: .2rem;
                        color: #999;
                    }
                }
                .right{
                    text-align: right;
                    .num{
                        font-size: .28rem;
                        &.add{
                            color: #e5514f;
                        }
                        &.del{
                            color: #08b767;
                        }
                    }
                    .tips{
                        font-size: .22rem;
                    }
                }
            }
        }
    }
</style>
